<template name="hk-modal">
	<view class="modalMask"  v-if="isShow" @tap.self="tapMask">
		<view class="modalBox" @tap.stop>
			<text class="boxTitle" v-if="title">{{ title }}</text>
			<text class="upDateCnt" v-if="cntText">{{ cntText }}</text>
			<view class="poupCntSlot" v-if="isCntSlot" :style="{ 'max-height': maxHeight + 'px' }"><slot name="cntSlot"></slot></view>
			<view class="btnGroup">
				<button class="cancleBtn" v-if="cancle" @tap.stop="cancleTap">{{ cancle }}</button>
				<button class="confirmBtn" v-if="confirm" @tap.stop="confirmTap">{{ confirm }}</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'hk-modal', //组件名称
	// 传递参数
	props: {
		isCntSlot: {
			//是否有插槽自定义内容
			type: Boolean,
			default: false
		}
	},
	// 组件参数
	data() {
		return {
			isShow: false, //是否显示
			title: '提示', //标题文字
			cntText: '提示内容提示内容提示内容提示内容提示内容', //提示详细信息
			cancle: '取消', //取消按钮文字
			confirm: '确认', //确认按钮文字
			maskClose: true, //是否可以点击遮罩层关闭
			cancleFcn: null, //取消按钮点击执行方法
			confirmFcn: null, //确认按钮点击方法
			animation: false, //动画状态
			maxHeight: (uni.getSystemInfoSync().windowHeight - uni.upx2px(272) - uni.getSystemInfoSync().statusBarHeight) * 0.8 //有自定义插槽内容时，内容区域的最大高度，超出会scroll
		};
	},
	watch: {
		isShow(newValue) {
			if (newValue) {
				this.show();
			} else {
				this.close();
			}
		}
	},
	// 组件方法
	methods: {
		// 显示
		show() {
			this.isShow = true;
			setTimeout(() => {
				this.animation = true;
			}, 30);
		},
		// 关闭
		close() {
			this.animation = false;
			setTimeout(() => {
				this.isShow = false;
			}, 30);
		},
		// 初始化
		init(opt) {
			Object.assign(this.$data, opt);
		},
		// 取消按钮点击事件
		cancleTap() {
			if (this.cancleFcn) {
				let rst = this.cancleFcn();
				if (typeof rst == 'boolean' && !rst) {
				} else {
					this.close();
				}
			} else {
				this.close();
			}
		},
		// 确认按钮点击事件
		confirmTap() {
			if (this.confirmFcn) {
				let rst = this.confirmFcn();
				if (typeof rst == 'boolean' && !rst) {
				} else {
					this.close();
				}
			} else {
				this.close();
			}
		},
		tapMask() {
			if (this.maskClose) {
				this.close();
			}
		}
	}
};
</script>

<style lang="less" scoped>
.modalMask {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 99999;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	.modalBox {
		background-color: #ffffff;
		width: 76%;
		border-radius: 20upx;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.boxTitle {
			font-size: 40upx;
			padding: 20upx 0;
			font-weight: bold;
			text-align: center;
			border-bottom: 1px solid #eeeeee;
		}
		.upDateCnt {
			padding: 30upx 30upx;
			display: flex;
			flex-direction: column;
			font-size: 32upx;
		}
		.btnGroup {
			display: flex;
			// border-top: 1px solid #EEEEEE;
			margin-top: 24upx;
			button {
				flex-grow: 1;
				border-radius: 0;
				font-size: 32upx;
				height: 100upx;
				line-height: 100upx;
			}
			button::after {
				border: none;
				border-radius: 0;
			}
			.cancleBtn {
				border: none;
				outline: none;

				border-right: 1px solid #eeeeee;
			}
			.confirmBtn {
				background-color: #ffcd11;
			}
		}
	}
}
.ani {
	top: 0;
}
.poupCntSlot {
	overflow: scroll;
}
</style>
